<template>
<!--group_list.wxml-->
<view class="container">
    <view class="nav">
        <navigator :class="'nav-item ' + (tabType == '' ? 'red-on' : '')" @tap="changeTab" id="tab_default">默认</navigator>
        <navigator :class="'nav-item ' + (tabType == 'new' ? 'red-on' : '')" @tap="changeTab" id="tab_new">最新<view class="ico-dg"><image class="wh100" src="/static/images/dg.png"></image></view></navigator>
        <navigator :class="'nav-item ' + (tabType == 'comment' ? 'red-on' : '')" @tap="changeTab" id="tab_comment">评论数<view class="ico-dg"><image class="wh100" src="/static/images/dg.png"></image></view></navigator>
    </view>
    <navigator class="group-purchase" hidden="requestData.ad">
        <image class="wh100" :src="url + '' + requestData.ad.ad_code"></image>
    </navigator>
    <view class="choice_box">
        <navigator v-for="(item, index) in requestData.groups" :key="index" class="choice_item" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id + '&item_id=' + item.item_id">
            <view class="img-wrap">
                <image :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=400&height=400'"></image>
                <view class="discount">{{item.rebate}}折</view>
            </view>
            <view class="title">{{item.title}}</view>
            <view class="involved">{{item.virtual_num + item.order_num}}人参与</view>
            <view class="price">￥{{item.price}}</view>
            <view class="count-down">
                <view class="tip-count">剩余</view>
                <view class="tip-count">{{ item.remainTime }}</view>
            </view>
        </navigator>
    </view>
    <view class="no-data" v-if="!requestData.groups || requestData.groups.length == 0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有找到相关的记录</view>
        <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
    </view>
</view>
</template>

<script>
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      requestData: null,
      tabType: '',
      goodsCurrentPage: 1,
      timer: null
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    load.init(this, 'groups', 'requestData');
    this.requestGroupBuy(this.tabType);
    this.createTimer();
  },
  onUnload: function () {
    clearInterval(this.timer);
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestGroupBuy(this.tabType);
    }
  },
  methods: {
    changeTab: function (event) {
      var tabType = '';

      if (event.target.id == 'tab_new') {
        tabType = 'new';
      } else if (event.target.id == 'tab_comment') {
        tabType = 'comment';
      } //重置数据


      load.resetConfig();
      this.tabType = tabType;
      this.setData({
        tabType: tabType
      });
      this.requestData = null;
      this.goodsCurrentPage = 1;
      this.requestGroupBuy(tabType);
    },
    requestGroupBuy: function (tabType) {
      var that = this;
      var requestUrl = that.url + '/api/activity/group_list';

      if (tabType) {
        requestUrl += '/type/' + tabType;
      }

      requestUrl = requestUrl + '?p=' + that.goodsCurrentPage;
      load.request(requestUrl, function () {
        that.goodsCurrentPage++;
      });
    },
    createTimer: function () {
      var that = this;
      var startTime = new Date().getTime();
      this.timer = setInterval(function () {
        if (!that.requestData || !that.requestData.groups) {
          return;
        }

        var remainTime = 0;
        var groups = that.requestData.groups;

        for (var i = 0; i < groups.length; i++) {
          var diffTime = startTime - groups[0].server_time * 1000;
          console.log(groups[0].server_time * 1000);
          console.log(startTime);
          groups[i].remainTime = util.remainTime(groups[i].end_time * 1000 - new Date().getTime() + diffTime);
        }

        that.setData({
          'requestData.groups': groups
        });
      }, 1000);
    }
  }
};
</script>
<style>
page{
    background-color: #f5f5f5;
}
.container {
    color: #666;
}
.nav-item{
    float: left;
    width: 33.33%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
}
.nav-item .ico-dg{
    width: 32rpx;
    height: 18rpx;
    margin-left: 10rpx;
    line-height: 0;
}
.group-purchase{
    width: 100%;
    height: 375rpx;
}
.choice_box{
    background-color: #f5f5f5;
}
.choice_box .choice_item{
    position: relative;
    float: left;
    width: 345rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 10rpx;
    overflow: hidden;
}
.choice_item .img-wrap{
    position: relative;
    width:345rpx;
    height:345rpx;
    overflow: hidden;
}
.choice_item .img-wrap image{
    width: 100%;
    height: 100%;
}
 .discount{
    position: absolute;
    right: 0;
    top: 0;
    width: 78rpx;
    height: 46rpx;
    line-height: 46rpx;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    background-color: #ff6a00;
}
.choice_item .title{
    margin-top:16rpx;
    padding: 0 10rpx;
    height: 72rpx;
    line-height: 36rpx;
    color: #333;
    overflow: hidden;
    word-break: break-all;
}
.involved{
    font-size: 22rpx;
    padding:10rpx;
    color: #666;
}
.choice_item .price{
    height: 30rpx;
    line-height: 30rpx;
    padding-bottom:20rpx;
    padding-left:10rpx;
    color: #ff6a00;
    font-size: 24rpx;
}
.count-down{
    position: absolute;
    right: 5rpx;
    bottom: 20rpx;
    font-size: 22rpx;
    color: #666;
}
.nav{
  background: #fff;
}
</style>